<template>
    <div class="top-products">
      <el-card>
        <div slot="header" class="header-actions">
          <span class="title">热销商品排行榜</span>
          <div class="filters">
            <el-switch
              v-model="isUserRanking"
              active-text="用户"
              inactive-text="总榜"
              @change="loadTopProducts"
              style="margin-right: 12px;"
            />
            <el-select v-model="timeType" @change="loadTopProducts" style="width: 100px;">
              <el-option label="本周" value="week"></el-option>
              <el-option label="本月" value="month"></el-option>
            </el-select>
            <el-select 
              v-model="categoryId" 
              @change="loadTopProducts"
              clearable
              placeholder="全部分类"
              style="width: 120px;">
              <el-option label="鲜肉" value="1"></el-option>
              <el-option label="蔬菜" value="2"></el-option>
              <el-option label="水果" value="3"></el-option>
              <el-option label="其他" value="4"></el-option>
            </el-select>
          </div>
        </div>
        
        <el-table 
          v-loading="loading"
          :data="topProducts" 
          style="width: 100%"
          empty-text="暂无数据">
          <el-table-column prop="rank" label="排名" width="80">
            <template #default="{ $index }">
              <el-tag :type="getRankType($index)">
                {{ $index + 1 }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商品信息" min-width="200">
            <template #default="{ row }">
              <div class="product-info">
                <el-image 
                  :src="row.image" 
                  :preview-src-list="[row.image]"
                  fit="cover"
                  class="product-image">
                </el-image>
                <span class="product-name">{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="销量" width="120" sortable></el-table-column>
          <el-table-column label="销售额" width="150" sortable>
            <template #default="{ row }">
              ¥{{ (row.price * row.quantity)?.toFixed(2) || '0.00' }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getHotProducts, getUserHotList } from '@/axios/sales'
  
  // 响应式状态
  const loading = ref(false)
  const timeType = ref('week')
  const categoryId = ref(null)
  const isUserRanking = ref(false)
  const topProducts = ref([])
  
  // 获取分类名称
  const getCategoryName = (id) => {
    const categoryMap = {
      '1': '鲜肉',
      '2': '蔬菜',
      '3': '水果',
      '4': '其他'
    }
    return categoryMap[id] || '全部分类'
  }
  
  // 获取时间类型名称
  const getTimeTypeName = (type) => {
    return type === 'week' ? '本周' : '本月'
  }
  
  // 获取排名标签类型
  const getRankType = (index) => {
    const types = ['danger', 'success', 'warning']
    return types[index] || ''
  }
  
  // 加载热销商品数据
  const loadTopProducts = async () => {
    loading.value = true
    try {
      const params = {
        type: timeType.value,
        categoryId: categoryId.value
      }
      console.log('请求参数:', params)
      const data = await (isUserRanking.value ? getUserHotList(params) : getHotProducts(params))
      console.log('响应数据:', data)
      topProducts.value = data
    } catch (error) {
      ElMessage.error(error.response?.data?.message || '获取热销商品失败')
      console.error('获取热销商品失败:', error)
      console.error('错误详情:', {
        status: error.response?.status,
        statusText: error.response?.statusText,
        data: error.response?.data
      })
      topProducts.value = []
    } finally {
      loading.value = false
    }
  }
  
  // 初始化加载数据
  onMounted(() => {
    loadTopProducts()
  })
  </script>
  
  <style scoped>
  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
  }
  
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  
  .filters {
    display: flex;
    gap: 12px;
  }
  
  .el-tag {
    width: 32px;
    text-align: center;
  }
  
  .product-info {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .product-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
  
  .product-name {
    font-size: 14px;
    color: #333;
  }
  
  :deep(.el-card__header) {
    padding: 0;
  }
  </style>